<template>
  <div class="app-container home">
    <div style="display: flex;flex-direction: column;align-items: center;width: 100%;">
      <div class="analysis_top">
        <div class="analysis_top_item">
          <div class="analysis_item_icon">
            <img src="@/assets/images/xingxing.png" alt="" srcset="">
          </div>
          <div class="analysis_item_con">
            <div class="titles">电站总数</div>
            <div class="tsum">{{ sumInfo.baseCount ? sumInfo.baseCount : 0 }}</div>
          </div>
        </div>
        <div class="analysis_top_item">
          <div class="analysis_item_icon">
            <img src="@/assets/images/xingxing.png" alt="" srcset="">
          </div>
          <div class="analysis_item_con">
            <div class="titles">区域总数</div>
            <div class="tsum">{{ sumInfo.regionCount ? sumInfo.regionCount : 0 }}</div>
          </div>
        </div>
        <div class="analysis_top_item">
          <div class="analysis_item_icon">
            <img src="@/assets/images/xingxing.png" alt="" srcset="">
          </div>
          <div class="analysis_item_con">
            <div class="titles">企业总数</div>
            <div class="tsum">{{ sumInfo.qyCount ? sumInfo.qyCount : 0 }}</div>
          </div>
        </div>
        <div class="analysis_top_item">
          <div class="analysis_item_icon">
            <img src="@/assets/images/xingxing.png" alt="" srcset="">
          </div>
          <div class="analysis_item_con">
            <div class="titles">报警总数</div>
            <div class="tsum">{{ sumInfo.warnCount ? sumInfo.warnCount : 0 }}</div>
          </div>
        </div>
      </div>

      <div style="display: flex;width: 100%;">
        <div class="name_left">
          <!-- <div class="name_info" v-if="userinfo">
        <div class="name_info_top">
          <img :src="userinfo.userAvatarUrl" alt="" srcset="">
          <div class="userinfo">
            <div>{{ userinfo.userName }}</div>
            <div>{{ userinfo.AdminName }}</div>
          </div>
        </div>
        <div class="name_info_btm"><span>登录时间：</span><span>{{ parseTime(new Date(newDates), '{y}-{m}-{d} {h}:{i}:{s}')
            }}</span></div>
      </div>  -->
          <!-- <div class="journal_u">
            <div class="journal_u_title">
              <span>日志</span>
              <span style="color: #165DFF;font-size: 14px;">查看更多</span>
            </div>
            <el-table class="height_table" :data="tableData" :height="380" style="width: 100%;
      ">
              <el-table-column label="序号" type="index" align="center" width="50">
              </el-table-column>
              <el-table-column prop="name" align="center" label="类型" width="80">
              </el-table-column>
              <el-table-column prop="sketch" align="center" label="简述" :show-overflow-tooltip="true" width="180">
              </el-table-column>

              <el-table-column prop="date" align="center" label="时间">
              </el-table-column>
            </el-table>
          </div> -->
        </div>
        <!-- <div class="name_box">
          <div class="analysis box">
            <div class="title">数据统计</div>
            <div ref="chartRef" class="chart-wrapper">
            </div>
          </div>
        </div> -->
      </div>
    </div>


  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  mapGetters
} from 'vuex'
import store from "../store";
import router from "../router";
import { getstatisticsindex} from '@/api/user.js'
export default {
  name: 'Index',
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'device'
    ]),
  },
  data() {
    return {
      newDates: new Date(),
      userinfo: null,
      tableData: [{
        date: '2016-05-02',
        name: '报警',
        sketch: '这是报警'
      }, {
        date: '2016-05-04',
        name: '常规',
        sketch: '这是常规'
      }, {
        date: '2016-05-01',
        name: '操作',
        sketch: '这是操作'
      }, {
        date: '2016-05-03',
        name: '定时',
        sketch: '这是定时'
      }],
      lineChartData: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145],
        dates: ['2023-03-15', '2023-03-16', '2023-03-17', '2023-03-18', '2023-03-19', '2023-03-20', '2023-03-21']
      },
      sumInfo: {}
    };
  },
  mounted() {
    // let fHeight = (window.getComputedStyle(document.querySelector('.height_table')).height).replace('px', "")
    this.newDates = localStorage.getItem('newDates')
    this.userinfo = JSON.parse(localStorage.getItem('name'))
    // this.drawChart()
    this.getList()
  },
  methods: {
    getList() {
      getstatisticsindex().then(res => {
        if (res.code == 200) {
          console.log(res.data);
          this.sumInfo = res.data
        }

      })
    },
    /**
     * 跳转链接
     */
    goTarget(href) {
      window.open(href, '_blank');
    },
    /**
     * 绘图
     */
    drawChart() {
      this.chart = echarts.init(this.$refs.chartRef, 'macarons')
      this.setOptions(this.lineChartData)
    },
    setOptions({ expectedData, actualData, dates } = {}) {
      this.chart.setOption({
        xAxis: {
          data: dates,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 40,
          bottom: 30,
          top: 30,
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: false }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['今日数据', '本周数据']
        },
        series: [{
          name: '今日受理数', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: '服务数量',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    }
  },
  components: {
    // LineChart
  }
};
</script>

<style scoped lang="scss">
.app-container {
  overflow: visible;
}

.home {
  display: flex;
  // align-items: center;
  justify-content: space-between;

  .name_left {
    flex: 1;
    margin-right: 20px;

    .journal_u {
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px #60778E47;
      border-radius: 8px;
      height: calc(100% - 370px);
      min-height: 548px;
      margin-top: 20px;

      .journal_u_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
      }
    }

    .name_info {
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px #60778E47;
      border-radius: 8px;

      .name_info_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;

        // height: 300px;
        img {
          width: 160px;
          height: 160px;
          border-radius: 20px;
        }

        .userinfo {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          height: 160px;
          flex: auto;
          padding-left: 20px;

        }
      }

      .name_info_btm {
        color: #ABA7A7;
        font-size: 18px;
        border-top: 1px solid #60778E47;
        padding-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

    }

  }

  .name_box {
    flex: 2;
  }

  // background: #F1F2F6;
  //min-height: calc(100vh - 84px);
  .box {
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px #60778E47;
    border-radius: 8px;

    .title {
      font-weight: bold;
    }
  }

  .analysis_top {
    width: 100%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px #60778E47;
    border-radius: 8px;
    display: flex;

    .analysis_top_item {
      flex: 1;
      height: 136px;
      margin-right: 20px;
      display: flex;
      align-items: center;
      box-shadow: 0 0 10px #60778E47;
      border-radius: 8px;

      .analysis_item_icon {
        flex: 2;
        height: 100%;
        border-radius: 8px 0 0 8px;
        background: #02A8A6;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 48px;

        }
      }

      .analysis_item_con {
        flex: 3;
        color: #101010;
        font-size: 18px;
        text-align: center;

        .titles {
          margin-bottom: 20px;
        }

        .tsum {
          color: #0F40F5;
        }
      }
    }

    .analysis_top_item:nth-last-child(1) {
      margin-right: 0;
    }
  }

  .analysis {
    width: 100%;
    height: 548px;
    margin-top: 20px;

    // flex: 1;
    //margin-bottom: 20px;
    //min-width: 291px;
    .chart-wrapper {
      height: 460px;
      margin-top: 30px;
    }
  }

  .shortcuts {
    width: 320px;
    margin-left: 20px;

    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;

      li {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;

        div {
          margin-top: 10px;
        }

        &:hover {
          color: #469EF7;
        }
      }
    }
  }
}
</style>
